import React, { useState } from 'react';
import { Tabs } from 'antd';
import { Resizable } from 'react-resizable';
import ScreenshotList from './ScreenshotList';
import CSVList from './CSVList'
import VisualList from './VisualList'
import './index.less';

interface HandleProps {
    handleAxis: string;
    [key: string]: any;
}

const ResizeHandle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
    const { handleAxis, ...restProps } = props;
    return <div ref={ref} className={`panel-footer-resize-handle handle-${handleAxis}`} {...restProps} />;
});

export default function PanelFooter() {
    const [height, setHeight] = useState(50);
    return (
        <Resizable
            width={Infinity}
            height={height}
            onResize={(e, { size }) => {
                setHeight(size.height);
            }}
            handle={<ResizeHandle handleAxis="y" />}
            axis="y"
            minConstraints={[Infinity, 50]}
            maxConstraints={[Infinity, window.innerHeight * 0.8]}
            draggableOpts={{
                enableUserSelectHack: false,
                grid: [1, 1]
            }}
            handleSize={[0, 10]}
            resizeHandles={['n']}
        >
            <div className="panel-footer" style={{ height }}>
                <Tabs
                    type="card"
                    items={[
                        {
                            key: 'logs',
                            label: '日志',
                            children: <div className="tab-content">日志内容</div>
                        },
                        {
                            key: 'variables',
                            label: '变量',
                            children: <div className="tab-content">变量内容</div>
                        },
                        {
                            key: 'screenshots',
                            label: '截图',
                            children: <ScreenshotList /> 
                        },
                        {
                            key: 'csv',
                            label: 'CSV',
                            children: <CSVList />
                        },
                        {
                            key: 'visual',
                            label: '视觉',
                            children: <VisualList/>
                        }
                    ]}
                />
            </div>
        </Resizable>
    );
}
